<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字：</span>
      <el-input placeholder="请输入关键字" v-model="returnReq.keyword" style="width: 200px"></el-input>

      <span style="margin-left: 20px">回款日期：</span>
      <el-date-picker style="width: 140px" v-model="returnReq.accountDate1" value-format="yyyy-MM-dd HH:mm:ss"
        type="date" placeholder="选择起始日期"></el-date-picker>
      <span style="margin-left: 10px; margin-right: 10px">至</span>
      <el-date-picker style="width: 140px" v-model="returnReq.accountDate2" value-format="yyyy-MM-dd HH:mm:ss"
        type="date" placeholder="选择截至日期"></el-date-picker>

      <span style="margin-left: 20px">登记日期：</span>
      <el-date-picker style="width: 140px" v-model="returnReq.createDate1" value-format="yyyy-MM-dd HH:mm:ss"
        type="date" placeholder="选择起始日期"></el-date-picker>
      <span style="margin-left: 10px; margin-right: 10px">至</span>
      <el-date-picker style="width: 140px" v-model="returnReq.createDate2" value-format="yyyy-MM-dd HH:mm:ss"
        type="date" placeholder="选择截至日期"></el-date-picker>
      <span style="text-align: right; margin-left: 10px">主办人员</span>
      <el-select filterable v-model="returnReq.hosterId" clearable style="margin-left: 10px;width: 200px">
        <el-option v-for="(item, index) in hosters" :key="index" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" size="small" @click="getDatas()">
        搜索
      </el-button>

      <el-button type="warning" style="margin-left: 10px" size="small" @click="outputReturnExcel">
        导出报表
      </el-button>
    </div>
    <div class="main">
      <el-tabs type="border-card">
        <el-tab-pane label="概览">
          <div ref="chart1" style="margin-top:50px;width: 100%; height: 60vh"></div>
          <el-divider></el-divider>
          <div ref="chart2" style="margin-top:80px;width: 100%; height: 60vh"></div>
        </el-tab-pane>
        <el-tab-pane label="图表">
          <el-table v-if="pageData" style="overflow: auto" height="640px" :data="pageData.table" stripe border
            highlight-current-row>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column label="购买方">
              <template slot-scope="info">
                {{ info.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="回款笔数">
              <template slot-scope="info">
                {{ info.row.count }}张
              </template>
            </el-table-column>
            <el-table-column label="回款金额">
              <template slot-scope="info">
                {{ info.row.value }}元
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="info">
                <el-table style="overflow: auto;margin: 5px;" :data="info.row.datas" stripe border
                  highlight-current-row> <el-table-column type="index" width="40"></el-table-column>
                  <el-table-column label="回款金额" width="100">
                    <template slot-scope="info">{{ info.row.CSBR_Fee }}元</template>
                  </el-table-column>
                  <el-table-column label="回款日期" width="160">
                    <template slot-scope="info">
                      <div>{{ info.row.CSBR_AccountTime | formatDate }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="发票信息">
                    <template slot-scope="info">
                      <div v-if="info.row.CSB_No">发票号码：{{ info.row.CSB_No }}</div>
                      <div v-if="info.row.CSB_Fee">
                        价税合计：{{ info.row.CSB_Fee }}
                      </div>
                      <div v-if="info.row.CSB_WithOutTaxFee">
                        金额：{{ info.row.CSB_WithOutTaxFee }}
                      </div>
                      <div v-if="info.row.CSB_TaxFee">
                        税额：{{ info.row.CSB_TaxFee }}
                      </div>
                      <div v-if="info.row.CSB_BillDate">
                        开票日期：{{ info.row.CSB_BillDate | formatDate }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="案件">
                    <template slot-scope="info">
                      <div v-if="info.row.CS_No">流水号：{{ info.row.CS_No }}</div>
                      <div v-if="info.row.CS_DisplayName">
                        案件名：{{ info.row.CS_DisplayName }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="登记日期" width="120">
                    <template slot-scope="info">
                      {{ info.row.CSBR_CreateTime | formatDate }}
                    </template>
                  </el-table-column>
                  <el-table-column label="购买方">
                    <template slot-scope="info">
                      {{ info.row.BuyCompanyName }}
                      {{ info.row.BuyEmployeeName }}
                    </template>
                  </el-table-column>
                  <el-table-column label=" 备注">
                    <template slot-scope="info">
                      {{ info.row.CSBR_Remark }}
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="info">
                      <div>
                        <el-button @click="toCase(info.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                          title="查看案件详情">
                          案件详情
                        </el-button>
                      </div>
                      <div>
                        <el-button @click="
                          curReturn = info.row
                        imageVis = true
                          " type="text" size="small" icon="el-icon-search" title="查看扫描件">
                          扫描件
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="详情">
          <el-table style="overflow: auto" height="640px" :data="returnRes.Items" stripe border highlight-current-row>
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="回款金额" width="100">
              <template slot-scope="scope">{{ scope.row.CSBR_Fee }}元</template>
            </el-table-column>
            <el-table-column label="回款日期" width="160">
              <template slot-scope="scope">
                <div>{{ scope.row.CSBR_AccountTime | formatDate }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发票信息">
              <template slot-scope="scope">
                <div v-if="scope.row.CSB_No">发票号码：{{ scope.row.CSB_No }}</div>
                <div v-if="scope.row.CSB_Fee">
                  价税合计：{{ scope.row.CSB_Fee }}
                </div>
                <div v-if="scope.row.CSB_WithOutTaxFee">
                  金额：{{ scope.row.CSB_WithOutTaxFee }}
                </div>
                <div v-if="scope.row.CSB_TaxFee">
                  税额：{{ scope.row.CSB_TaxFee }}
                </div>
                <div v-if="scope.row.CSB_BillDate">
                  开票日期：{{ scope.row.CSB_BillDate | formatDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="案件">
              <template slot-scope="scope">
                <div v-if="scope.row.CS_No">流水号：{{ scope.row.CS_No }}</div>
                <div v-if="scope.row.CS_DisplayName">
                  案件名：{{ scope.row.CS_DisplayName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="登记日期" width="120">
              <template slot-scope="scope">
                {{ scope.row.CSBR_CreateTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="购买方">
              <template slot-scope="scope">
                {{ scope.row.BuyCompanyName }}
                {{ scope.row.BuyEmployeeName }}
              </template>
            </el-table-column>
            <el-table-column label=" 备注">
              <template slot-scope="scope">
                {{ scope.row.CSBR_Remark }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <div>
                  <el-button @click="
                    curBill = scope.row
                  imageVis = true
                    " type="text" size="small" icon="el-icon-search" title="查看扫描件">
                    扫描件
                  </el-button>
                </div>
                <div>
                  <el-button @click="toCase(scope.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                    title="查看案件详情">
                    案件详情
                  </el-button>
                </div>
                <div>
                  <el-button v-if="scope.row.CBA_FormID" @click="toForm(scope.row.CBA_FormID)" type="text" size="small"
                    icon="el-icon-search" title="查看审核流程">
                    查看审核流程
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px">
            <div style="display: flex;padding: 10px 50px 0 5px; width: auto; float: right; ">
              <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
                :current-page.sync="returnReq.pageIndex" :total="returnRes.Total" :page-size="returnReq.pageSize"
                :page-sizes="[5, 10, 15]" @size-change="
                  (val) => {
                    returnReq.pageSize = val
                    getReturns()
                  }
                " @current-change="getReturns()"></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog :visible.sync="imageVis" width="60%" :modal-append-to-body="false" center>
      <el-image v-if="curBill && curBill.FL_SrcPath" :src="fileURL + curBill.FL_SrcPath" fit="fill"
        :preview-src-list="[fileURL + curBill.FL_SrcPath]"></el-image>
      <div v-else>未上传发票</div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  baseURL,
  fileRoot,
  tokenName,
  empIdName
} from '@/config'
import {
  getReturns, getSalemanBillReturnStat, getHosterTeam
} from '@/api/personal/salemanStas'
import axios from 'axios'

export default {
  data: function () {
    return {
      fileURL: baseURL + fileRoot,
      pageData: null,
      hosters: [],
      returnReq: {
        pageIndex: 1,
        pageSize: 5,
        dealDate1: null,
        dealDate2: null,
        keyword: null,
        nohaveCmp: null,
        type: null,
      },
      returnRes: {
        Items: [],
        Total: 0,
      },

      curBill: null,
      imageVis: false,
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  methods: {
    getHosterTeam() {
      getHosterTeam().then(({ data }) => {
        this.hosters = data
      })
    },
    outputReturnExcel() {
      if (
        this.returnReq.keyword == null &&
        this.returnReq.createDate1 == null &&
        this.returnReq.createDate2 == null &&
        this.returnReq.accountDate1 == null &&
        this.returnReq.accountDate2 == null
      ) {
        this.$message('请选择导出日期')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post(
          '/api/Personal/SalemanStas/OutputReturnCaseBillExcel',
          this.returnReq,
          config
        )
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '回款报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
    getDatas() {
      this.getReturns()
      this.getSalemanBillReturnStat()
    },
    showChart1() {
      var xAxisDatas = this.pageData.chart1.datas.map((x) => x.name)
      var seriesData1 = this.pageData.chart1.datas.map((x) => x.value)
      var seriesData2 = this.pageData.chart1.datas.map((x) => x.count)
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          title: {
            text: this.pageData.chart1.title,
            textStyle: { fontSize: 20 },
            left: '40%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          legend: { align: 'left', right: '10%' },
          xAxis: {
            data: xAxisDatas,
          },
          yAxis: [
            {
              type: 'value',
              name: '金额',
              axisLabel: {
                formatter: '{value} 元',
              },
            },
            {
              type: 'value',
              name: '笔数',
              position: 'right',
              axisLabel: {
                formatter: '{value} 笔',
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '回款金额',
              type: 'bar',
              yAxisIndex: 0,
              data: seriesData1,
            },
            {
              name: '回款笔数',
              type: 'line',
              yAxisIndex: 1,
              data: seriesData2,
            },
          ],
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function () {
          myChart.resize()
        })
      })
    },
    showChart2() {
      var xAxisDatas = this.pageData.chart2.datas.map((x) => x.name)
      var seriesData1 = this.pageData.chart2.datas.map((x) => x.value)
      var seriesData2 = this.pageData.chart2.datas.map((x) => x.count)
      const chart2 = this.$refs.chart2
      if (chart2) {
        const myChart = this.$echarts.init(chart2)
        const option = {
          title: {
            text: this.pageData.chart2.title,
            textStyle: { fontSize: 20 },
            left: '40%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          legend: { align: 'left', right: '10%' },
          xAxis: {
            data: xAxisDatas,
          },
          yAxis: [
            {
              type: 'value',
              name: '金额',
              axisLabel: {
                formatter: '{value} 元',
              },
            },
            {
              type: 'value',
              name: '笔数',
              position: 'right',
              axisLabel: {
                formatter: '{value} 笔',
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '回款金额',
              type: 'bar',
              yAxisIndex: 0,
              data: seriesData1,
            },
            {
              name: '回款笔数',
              type: 'line',
              yAxisIndex: 1,
              data: seriesData2,
            },
          ],
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function () {
          myChart.resize()
        })
      })
    },
    getSalemanBillReturnStat() {
      getSalemanBillReturnStat(this.returnReq).then(({ data }) => {
        this.pageData = data
        this.showChart1()
        this.showChart2()
      })
    },
    getReturns() {
      getReturns(this.returnReq).then(({ data }) => {
        this.returnRes = data
      })
    },
    toForm: function (formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toCase: function (caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
  },
  mounted: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    this.returnReq.type = this.$route.meta.type
    Object.assign(this.$data, data)
    this.getHosterTeam()
    this.getDatas()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 95%;
  overflow: auto;
}
</style>
<style lang="scss">
.el-tabs__content {
  height: 100%;
}
</style>
